<template>
  <!-- right 组件 -->
  <div class="right">
    <div class="shoppings" v-for="(item,index) in shoppingArr[xiabiao].list" :key="index">
      <div class="shoppings-image">
        <div class="image">
          <img :src="item.pic" alt="">
        </div>
      </div>
      <div class="xinxi">
        <h3>{{item.name}}</h3>
        <div class="spa">{{item.p1}}</div>
        <div class="spa">{{item.p2}}</div>
        <div class="bottom">
          <div class="jie">￥<span>{{item.price}}</span></div>
          <button class="btn">+</button>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
export default {
  props: ['shoppingArr', 'xiabiao'],

}
</script>

<style lang='scss' scoped>
 .right {
  flex: 1;
  // width: 80%;
  height: 610px;
  // background-color: pink;
  // display: flex;

  // .spa {
  //   color: gray;
  // }

  .shoppings {
    width: 100%;
    height: 150px;
    // background-color: blueviolet;
    display: flex;
    position: relative;

    > .shoppings-image {
      width: 35%;
      height: 100%;
      // background-color: red;
      display: flex;
      justify-content: center;
      align-items: center;

      > .image {
        width: 80%;
        height: 80%;
        // background-color: peru;
        > img {
          width: 100%;
          height: 100%;
        }
      }
    }
    > .xinxi {
      flex: 1;
      // background-color: yellow;
      > h3 {
        width: 100%;
        height: 50px;
        // background-color: violet;
      }
      > .spa {
        width: 100%;
        height: 20px;
        // background-color: teal;
      }
      > .bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 60px;
        // background-color: blue;
        > .jie {
          font-size: 12px;
          color: red;
          > span {
            font-size: 24px;
          }
        }
        > .btn {
          width: 20px;
          height: 20px;
          background-color: #00ffff;
          border-radius: 50%;
        }
      }
    }
  }
}
</style>